@import 'mixins_and_variables_and_functions';
@import 'issues_show';
@import 'issues_list';

$work-item-field-inset-shadow: inset 0 0 0 $gl-border-size-1 var(--gray-200, $gray-200) !important;
$work-item-overview-right-sidebar-width: px-to-rem(290px);
$work-item-overview-gap-width: 2rem;

// sticky error placement for errors in modals, by default it is 83px for full view
#work-item-detail-modal {
  .flash-container.flash-container-page.sticky {
    top: -8px;
  }
}


// stylelint-disable-next-line gitlab/no-gl-class
.gl-modal .work-item-view,
:where(.page-with-panels) .work-item-view, // when it's in a panel, treat work items like drawers
.work-item-drawer .work-item-view:not(:has(.design-detail)) {
  container-name: work-item-view;
  container-type: inline-size;
}

.work-item-drawer {
  transition: none;
}

@include gl-container-width-down(md, panel) {
  .work-item-overview {
    display: block !important;
  }

  .work-item-container-xs-hidden {
    display: none !important;
  }

  .work-item-attributes-wrapper {
    position: static !important;
    overflow-y: initial !important;
    margin-bottom: 0 !important;
    height: auto !important;
    @apply gl-mt-5;
  }
}

.work-item-overview:not(.sidebar-hidden) {
  @include gl-container-width-up(md) {
    display: grid;
    // allow the main content area to shrink
    // grid items have "max-width: auto" so without the minmax the content can
    // spill outside of the overview container
    $work-item-sidebar-min-width: 13rem;
    grid-template-columns: minmax(67%, 1fr) minmax($work-item-sidebar-min-width, $work-item-overview-right-sidebar-width);
    column-gap: $work-item-overview-gap-width;
  }
}

.work-item-overview-right-sidebar {
  margin-top: $gl-spacing-scale-5;

  .work-item-attributes-item {
    @apply gl-mb-4;

    &:not(:first-child) {
      @apply gl-pt-4;
      @apply gl-border-t;
      @apply gl-border-subtle;
    }
  }
}

.create-work-item-description {
  .markdown-area,
  .rte-text-box {
    @include gl-container-width-up(sm) {
      min-height: 38vh;
    }
  }
}

@include gl-container-width-up(md) {
  .work-item-attributes-wrapper {
    top: calc(#{$calc-application-header-height} + #{$work-item-sticky-header-height});
    height: calc(#{$calc-application-viewport-height} - #{$work-item-sticky-header-height});
    margin-bottom: calc(#{$content-wrapper-padding} * -1);
    padding-inline: $gl-spacing-scale-3;
    position: sticky;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .work-item-overview-right-sidebar {
    margin-top: 0;
    grid-row-start: 1;
    grid-column-start: 2;
    grid-row-end: 50;

    &.is-modal {
      .work-item-attributes-wrapper {
        top: 0;
      }
    }
  }
}

// There is no props to set the font weight class in GlToggle
// Here, we are overriding the font weight
.work-item-dropdown-toggle {
  // stylelint-disable-next-line gitlab/no-gl-class
  .gl-toggle-label {
    font-weight: normal;
  }

  a, a:hover {
    @apply gl-text-default;
    text-decoration: none;
  }
}

.editable-wi-title {
  width: 100%;
  @include gl-container-width-up(md, panel) {
    width: calc(100% - #{$work-item-overview-right-sidebar-width} - #{$work-item-overview-gap-width});
  }
}
// Disclosure hierarchy component, used for Ancestors widget

$disclosure-hierarchy-chevron-dimension: 1.2rem;

@mixin hierarchy-active-item-color {
  background-color: var(--gl-action-neutral-background-color-hover);

  &::after {
    background-color: var(--gl-action-neutral-background-color-hover);
    z-index: 3;
  }
}

.disclosure-hierarchy {
  @include gl-container-width-up(sm, panel) {
    margin-right: $gl-spacing-scale-7;
  }
}

.disclosure-hierarchy-item:first-child,
.disclosure-hierarchy-item:last-child {
  flex-shrink: 1;
}

.disclosure-hierarchy-button {
  flex-shrink: 1;
  min-width: 0;
  max-width: $gl-spacing-scale-48;
  padding-left: $gl-spacing-scale-4;
  padding-top: calc(#{$gl-spacing-scale-3} - 1px);
  padding-bottom: calc(#{$gl-spacing-scale-3} - 1px);
  display: flex;
  position: relative;
  font-size: $gl-font-size-sm;
  @apply gl-border;
  border-right-style: none;
  border-left-style: none;
  line-height: $gl-line-height-16;
  padding-right: $grid-size;
  background: var(--gl-background-color-default);
  color: var(--gl-action-neutral-foreground-color-default);

  &::before,
  &::after {
    content: '';
    position: absolute;
    background-color: inherit;
    top: 0.39rem;
    right: px-to-rem(-9px);
    width: $disclosure-hierarchy-chevron-dimension;
    height: $disclosure-hierarchy-chevron-dimension;
    transform: rotate(45deg) skew(14deg, 14deg);
    @apply gl-border;
    border-color: inherit;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-top-left-radius: $gl-border-radius-small;
    border-bottom-right-radius: $gl-border-radius-small;
  }

  &::before {
    background: var(--gl-background-color-default);
    left: -10px;
    z-index: 1;
  }

  &::after {
    z-index: 0;
  }

  .disclosure-hierarchy-item:first-child & {
    padding-left: $gl-spacing-scale-3;
    @apply gl-border-l;
    border-top-left-radius: $gl-border-radius-base;
    border-bottom-left-radius: $gl-border-radius-base;

    &::before {
      display: none;
    }

    &:active,
    &:focus,
    &:focus:active {
      // Custom focus
      box-shadow: 1px 1px 0 1px var(--gl-focus-ring-outer-color), 2px -1px 0 1px var(--gl-focus-ring-outer-color), -1px 1px 0 1px var(--gl-focus-ring-outer-color), -1px -1px 0 1px var(--gl-focus-ring-outer-color) !important;
    }
  }

  .disclosure-hierarchy-item:last-child & {
    padding-right: $gl-spacing-scale-4;
    @apply gl-border-r;
    border-top-right-radius: $gl-border-radius-base;
    border-bottom-right-radius: $gl-border-radius-base;

    &::after {
      display: none;
    }
  }

  &[disabled] {
    @apply gl-text-disabled;
    cursor: not-allowed;
  }

  &:not([disabled]):hover {
    border-color: var(--gl-border-color-default);
    @include hierarchy-active-item-color;
    color: var(--gl-action-neutral-foreground-color-hover);

    &::after {
      @apply gl-border-l-0;
      @apply gl-border-r-0;
    }
  }

  &:active,
  &:focus,
  &:focus:active {
    // Custom focus
    box-shadow: 1px 1px 0 1px var(--gl-focus-ring-outer-color), 2px -1px 0 1px var(--gl-focus-ring-outer-color) !important;
    outline: none;
    border-top: 1px solid var(--gl-action-neutral-border-color-default);
    border-bottom: 1px solid var(--gl-action-neutral-border-color-default);
    @include hierarchy-active-item-color;
    border-radius: $gl-border-radius-small;
    color: var(--gl-action-neutral-foreground-color-focus);

    &::before, &::after {
      box-shadow: 2px -2px 0 1px var(--gl-focus-ring-outer-color);
    }
  }
}

// stylelint-disable-next-line gitlab/no-gl-class
.work-item-sidebar-dropdown .gl-new-dropdown-panel {
    width: 100% !important;
    max-width: 17rem !important;
}

.container-limited {
  .work-item-sticky-header-text {
    max-width: $fixed-layout-width;
  }
}

.work-item-description .truncated{
  min-height: 16rem;
  max-height: 80vh;
  overflow: hidden;
}

.description-more{
  position: absolute;
  bottom: 0;
  pointer-events: none;

  &::before {
    content: '';
    display: block;
    height: 3rem;
    width: 100%;
    background: linear-gradient(180deg, transparent 0%, var(--gl-background-color-default) 100%);

    .work-item-drawer & {
      background: linear-gradient(180deg, transparent 0%, var(--gl-background-color-overlap) 100%);
    }
  }

  .show-all-btn {
    pointer-events: auto;
    background-color: var(--gl-background-color-default);

    .work-item-drawer & {
      background-color: var(--gl-background-color-overlap);
    }

    &::before, &::after {
      content: '';
      height: 1px;
      flex: 1;
      border-top: 1px solid var(--gl-border-color-subtle);
    }
  }
}

.is-ghost {
  opacity: 0.3;
  pointer-events: none;
}

.design-scaler-wrapper {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.work-item-design-widget-container {
  container-type: inline-size;
  container-name: work-item-design-widget;

  .work-item-design-grid {
    @apply gl-grid;
    @apply gl-grid-cols-2;
  }

  .design-list-item {
    height: unset;
  }

  .work-item-design-hidden-xs {
    @apply gl-hidden;
  }

  @container work-item-design-widget (min-width: #{$breakpoint-sm}) {
    .work-item-design-grid {
      @apply gl-grid-cols-3;
    }

    .work-item-design-show-sm {
      @apply gl-block;
    }

    .work-item-design-hidden-sm {
      @apply gl-hidden;
    }
  }

  @container work-item-design-widget (min-width: #{$breakpoint-md}) {
    .work-item-design-grid {
      @apply gl-grid-cols-4;
    }
  }

  @container work-item-design-widget (min-width: #{$breakpoint-xl}) {
    .work-item-design-grid {
      @apply gl-grid-cols-6;
    }
  }
}

.work-item-sidebar-container {
  container-type: inline-size;
  container-name: work-item-sidebar;

  @container work-item-sidebar (max-width: #{calc($work-item-overview-right-sidebar-width - 3rem)}) {
    .time-tracking-body {
      @apply gl-flex-col;
      @apply gl-items-start;

      .time-tracking-spent-and-progress {
        @apply gl-flex-col-reverse;
        @apply gl-w-full;
        @apply gl-items-stretch;

        .time-tracking-progress {
          @apply gl-mx-0;
          @apply gl-my-2;
        }
      }
    }

    .work-item-date-input {
      @apply gl-flex-col;
      @apply gl-items-stretch;

      .work-item-datepicker {
        @apply gl-max-w-full;
      }
    }

    // stylelint-disable-next-line gitlab/no-gl-class
    .work-item-sidebar-dropdown .gl-new-dropdown-panel {
      @apply gl-min-w-0 #{!important};
      @apply gl-max-w-[calc(100%-1rem)] #{!important};
    }
  }
}

// Temporary fallback for browsers that do not properly support container queries.
// Should be removed once container queries are fully stable across all browsers.
// This is implemnted below for specific browsers.
// Cf. https://gitlab.com/gitlab-org/gitlab/-/merge_requests/186598
@mixin browser-specific-overrides {
  .work-item-design-widget-container {
    container-type: unset;

    @include gl-container-width-up(sm, panel) {
      .work-item-design-grid {
        @apply gl-grid-cols-3;
      }

      .work-item-design-show-sm {
        @apply gl-block;
      }

      .work-item-design-hidden-sm {
        @apply gl-hidden;
      }
    }

    @include gl-container-width-up(md, panel) {
      .work-item-design-grid {
        @apply gl-grid-cols-4;
      }
    }

    @include gl-container-width-up(xl, panel) {
      .work-item-design-grid {
        @apply gl-grid-cols-6;
      }
    }
  }

  .work-item-sidebar-container {
    container-type: unset;
  }

  .work-item-notes .note-container-query-wrapper {
    container-type: unset !important;

    @include gl-container-width-down(sm, panel) {
      .note-hidden-xs {
        @apply gl-hidden
      }
    }
  }
}

.work-item-link-child:hover .work-item-status{
  // Subtle border as dark mode background is same as status badge
  box-shadow: inset 0 0 0 1px var(--gl-color-alpha-light-8);
}

// Safari
@supports (-webkit-appearance:none) and (stroke-color:transparent) {
  @include browser-specific-overrides;
}

// Firefox
@-moz-document url-prefix() {
  @include browser-specific-overrides;
}

ul.content-list {
  .issue-clickable {
    a, span {
      @apply gl-relative;
      @apply gl-z-2;
    }
  }
}

[data-testid="work-item-detail"]:has(.issue-sticky-header) .flash-container.sticky {
  top: calc(#{$calc-application-header-height} + var(--work-item-sticky-header-height, 3rem) + $gl-spacing-scale-3);
}

.work-item-drawer .flash-container.sticky {
  top: 0;
}

.work-item-drawer [data-testid="work-item-detail"]:has(.issue-sticky-header) .flash-container.sticky {
  top: calc(var(--work-item-sticky-header-height, 3rem) + $gl-spacing-scale-3);
}
